<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex'
const store = useStore()
import { autoLogin } from './services/LoginService';

const username = computed(() => store.getters.getUsername)
const avatar = computed(() => store.getters.getAvatar)
const login = computed(() => store.getters.getUserId !== 0)

import bg8Url from './assets/images/manage_bg2.png'


function handleLogout() {
  console.log("执行退出逻辑");
  localStorage.clear()
  store.dispatch('logout')
  window.location.reload()
}

onMounted(() => {
  store.dispatch('loadUserInfoFromLocalStorage')
  console.log(store.getters.getUsername + "-" +
    store.getters.getAvatar + "-" +
    store.getters.getUserId + "-" +
    store.getters.getEmail + "-" +
    store.getters.getFollowers + "-" +
    store.getters.getUploadNumber);
    console.log("自动登录测试======================");
    const token = localStorage.getItem('token');
    autoLogin(token)
})

const showBox = ref(false)

</script>
<template>
  <div id="app">
    <nav>
      <!-- 左侧：Logo -->
      <div class="nav-left">
        <h2>XXX</h2>
      </div>

      <!-- 中间：导航菜单 -->
      <div class="nav-center">
        <router-link to="/">首页</router-link>
        <router-link to="/resources">资源</router-link>
        <router-link to="/upload">上传</router-link>
        <router-link to="/about">关于</router-link>
      </div>

      <!-- 右侧：用户信息 -->
      <div class="nav-user-container" @mouseover="showBox = true" @mouseleave="showBox = false">
        <div class="nav-right">
          <h2>{{ username || '未登录' }}</h2>
          <img v-if="bg8Url" :src="bg8Url" alt="头像" />
        </div>
        <!-- 鼠标移入显示的内容框 -->
        <div v-if="showBox" class="user-box">
          <div v-if="login">
            <p class="username">{{ username || '未登录' }}</p>
            <!-- 在 .user-box 内部，用户名下方添加这一行 -->
            <div class="user-stats">
              <div>
                <span>粉丝</span>
                <strong>{{ store.getters.getFollowers }}</strong>
              </div>
              <div>
                <span>关注</span>
                <strong>{{ store.getters.getAttentions }}</strong>
              </div>
            </div>
            <div class="divider"></div>
            <div class="login-operations">
              <router-link to="/manage">管理中心</router-link>
              <router-link to="/manage">我的收藏</router-link>
            </div>
            <div class="divider"></div>
            <div class="logout">
              <router-link to="#" @click.prevent="handleLogout" class="logout-link">
                退出登录
              </router-link>
            </div>
          </div>

          <div v-if="!login">
            <p class="username">未登录</p>
            <div class="divider"></div>

            <div class="logout">
              <router-link to="/login">登录</router-link>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <router-view />
  </div>
</template>

<style scoped>
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.nav-left h2,
.nav-right h2 {
  font-size: 18px;
  margin: 0;
  color: #333;
}

.nav-center {
  display: flex;
  gap: 24px;
  margin-left: 720px;
  /* 让导航菜单往右移720px */
}

nav a {
  text-decoration: none;
  color: #333;
  margin: 0 15px;
  /* 左右各15px间隔 */
  font-weight: 500;
}

nav a:hover {
  color: #42b983;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-right img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

#app {
  padding-top: 24px;
  /* 给导航栏留空间 */
}

.nav-user-container {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.nav-user-container:hover {
  background-color: #e9e9e9;
  /* 鼠标悬停时轻微背景色变化 */
}

.user-box {
  position: absolute;
  top: 44px;
  right: 0;
  width: 200px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  font-size: 14px;
  z-index: 100;
}

.user-box .user-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.user-box .user-stats div {
  flex: 1;
  padding: 4px 0;
}

/* 当鼠标悬停在用户容器上时放大头像 */
.nav-user-container:hover .nav-right {
  transform: scale(1.2);
}

.user-box .user-stats strong {
  display: block;
  font-size: 15px;
  color: #333;
  font-weight: bold;
}

.user-box .username {
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  color: #333;
}

.user-box .divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 8px 0;
}

.user-box .login-operations,
.user-box .logout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.user-box a {
  text-decoration: none;
  color: #333;
  transition: all 0.2s;
  padding: 4px 0;
  border-radius: 4px;
}

.user-box a:hover {
  background-color: #f5f5f5;
  color: #42b983;
}

.user-box .arrow {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background-color: white;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1);
  z-index: 99;
}
</style>
